import {designPage, reactive, useRefs} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {$message, Button, Checkbox, DatePicker, Form, FormItem, Input, Select, SelectOption, TimePicker} from "../../../../packages";
import {PlainObject} from "plain-utils/utils/event";

export const demo1= designPage(() => {

  const { refs, onRef } = useRefs({
    form: Form,
  });

  const state = reactive({
    formData: {} as any,
    showAddress: true,
    rules: {
      legalName: { required: true },
      registryCapital: { label: 'Form.rules->label', required: true },
    },
  });

  const dynamicRequired = (formData: PlainObject | undefined) => {
    return !!formData!.enterpriseName;
  };

  const submit = async () => {
    await refs.form?.validate();
    $message('校验通过');
  };

  return () => (
    <DemoRow title="基本用法">
      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
        <FormItem label="所在地">
          <Checkbox v-model={state.showAddress} label="所在地"/>
        </FormItem>
        <FormItem label="FormItem.required" required field="enterpriseName">
          <Input v-model={state.formData.enterpriseName} placeholder="企业名称"/>
        </FormItem>
        {/*{!!state.showAddress && (
          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
            <Input v-model={state.formData.address} placeholder="所在地"/>
          </FormItem>
        )}
        <FormItem label="Form.rules->field" field="legalName">
          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
        </FormItem>
        <FormItem label="Form.rules->label" field="registryCapital">
          <Input v-model={state.formData.registryCapital} placeholder="注册资本"/>
        </FormItem>
        <FormItem label="FormItem.required有值时必填required有值时必填" required={dynamicRequired} field="businessNature">
          <Input v-model={state.formData.businessNature} placeholder="经营范围"/>
        </FormItem>
        <FormItem colon={false}>
          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
          <Button label="Commit" onClick={submit} type="primary"/>
        </FormItem>*/}
      </Form>
    </DemoRow>
  );
});


export const demo2 = designPage(() => {

  const { refs, onRef } = useRefs({
    form: Form,
  });

  const state = reactive({
    formData: {} as any,
    showAddress: true,
    rules: {
      legalName: { required: true },
    },
  });

  const submit = async () => {
    await refs.form?.validate();
    $message('校验通过');
  };

  return () => (
    <DemoRow title="校验string">
      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
        <FormItem label="所在地">
          <Checkbox v-model={state.showAddress} label="所在地"/>
        </FormItem>
        <FormItem label="FormItem.required" required field="enterpriseName" rules={{ type: 'string', min: 3, max: 5, message: '最少3个字符，最多5个字符' }}>
          <Input v-model={state.formData.enterpriseName} placeholder="string,min:3,max:5"/>
        </FormItem>
        {!!state.showAddress && (
          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
            <Input v-model={state.formData.address} placeholder="所在地"/>
          </FormItem>
        )}
        <FormItem label="Form.rules->field" field="legalName">
          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
        </FormItem>
        <FormItem colon={false}>
          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
          <Button label="Commit" onClick={submit} type="primary"/>
        </FormItem>
      </Form>
    </DemoRow>
  );
});


export const demo3 = designPage(() => {

  const { refs, onRef } = useRefs({
    form: Form,
  });

  const state = reactive({
    formData: {} as any,
    showAddress: true,
    rules: {
      legalName: { required: true },
    },
  });

  const submit = async () => {
    await refs.form?.validate();
    $message('校验通过');
  };

  return () => (
    <DemoRow title="校验number">
      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
        <FormItem label="所在地">
          <Checkbox v-model={state.showAddress} label="所在地"/>
        </FormItem>
        <FormItem label="FormItem.required" required field="enterpriseName" rules={{ type: 'number', min: 3, max: 5 }}>
          <Input v-model={state.formData.enterpriseName} placeholder="number,min:3,max:5"/>
        </FormItem>
        {!!state.showAddress && (
          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
            <Input v-model={state.formData.address} placeholder="所在地"/>
          </FormItem>
        )}
        <FormItem label="Form.rules->field" field="legalName">
          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
        </FormItem>
        <FormItem colon={false}>
          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
          <Button label="Commit" onClick={submit} type="primary"/>
        </FormItem>
      </Form>
    </DemoRow>
  );
});


export const demo4 = designPage(() => {

  const { refs, onRef } = useRefs({
    form: Form,
  });

  const state = reactive({
    formData: {} as any,
    showAddress: true,
    rules: {
      legalName: { required: true },
    },
  });

  const submit = async () => {
    await refs.form?.validate();
    $message('校验通过');
  };

  return () => (
    <DemoRow title="校验date">
      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
        <FormItem label="所在地">
          <Checkbox v-model={state.showAddress} label="所在地"/>
        </FormItem>
        <FormItem label="FormItem.required" required field="enterpriseName" rules={{ type: 'date', min: '2022-09-04', max: '2022-10-05' }}>
          <DatePicker v-model={state.formData.enterpriseName} placeholder="date,min:2022-09-04,max:2022-10-05"/>
        </FormItem>
        {!!state.showAddress && (
          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
            <Input v-model={state.formData.address} placeholder="所在地"/>
          </FormItem>
        )}
        <FormItem label="Form.rules->field" field="legalName">
          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
        </FormItem>
        <FormItem colon={false}>
          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
          <Button label="Commit" onClick={submit} type="primary"/>
        </FormItem>
      </Form>
    </DemoRow>
  );
});


export const demo5 = designPage(() => {

  const { refs, onRef } = useRefs({
    form: Form,
  });

  const state = reactive({
    formData: {} as any,
    showAddress: true,
    rules: {
      legalName: { required: true },
    },
  });

  const submit = async () => {
    await refs.form?.validate();
    $message('校验通过');
  };

  return () => (
    <DemoRow title="校验time">
      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
        <FormItem label="所在地">
          <Checkbox v-model={state.showAddress} label="所在地"/>
        </FormItem>
        <FormItem label="FormItem.required" required field="enterpriseName" rules={{ type: 'time', min: '20:00:00', max: '22:30:00' }}>
          <TimePicker v-model={state.formData.enterpriseName} placeholder="time,min:20:00:00,max:22:30:00"/>
        </FormItem>
        {!!state.showAddress && (
          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
            <Input v-model={state.formData.address} placeholder="所在地"/>
          </FormItem>
        )}
        <FormItem label="Form.rules->field" field="legalName">
          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
        </FormItem>
        <FormItem colon={false}>
          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
          <Button label="Commit" onClick={submit} type="primary"/>
        </FormItem>
      </Form>
    </DemoRow>
  );
});


export const demo6 = designPage(() => {

  const { refs, onRef } = useRefs({
    form: Form,
  });

  const state = reactive({
    formData: {} as any,
    showAddress: true,
    rules: {
      legalName: { required: true },
    },
  });

  const submit = async () => {
    await refs.form?.validate();
    $message('校验通过');
  };

  return () => (
    <DemoRow title="校验datetime">
      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
        <FormItem label="所在地">
          <Checkbox v-model={state.showAddress} label="所在地"/>
        </FormItem>
        <FormItem label="FormItem.required" required field="enterpriseName" rules={{ type: 'datetime', min: '2022-09-04 20:00:00', max: '2022-10-05 22:30:00' }}>
          <DatePicker datetime v-model={state.formData.enterpriseName} placeholder="datetime,min:2022-09-04 20:00:00,max:2022-10-05 22:30:00"/>
        </FormItem>
        {!!state.showAddress && (
          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
            <Input v-model={state.formData.address} placeholder="所在地"/>
          </FormItem>
        )}
        <FormItem label="Form.rules->field" field="legalName">
          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
        </FormItem>
        <FormItem colon={false}>
          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
          <Button label="Commit" onClick={submit} type="primary"/>
        </FormItem>
      </Form>
    </DemoRow>
  );
});


export const demo7 = designPage(() => {

  const { refs, onRef } = useRefs({
    form: Form,
  });

  const state = reactive({
    formData: {} as any,
    showAddress: true,
    rules: {
      legalName: { required: true },
    },
  });

  const submit = async () => {
    await refs.form?.validate();
    $message('校验通过');
  };

  return () => (
    <DemoRow title="校验array">
      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
        <FormItem label="所在地">
          <Checkbox v-model={state.showAddress} label="所在地"/>
        </FormItem>
        <FormItem label="FormItem.required" required field="enterpriseName" rules={{ type: 'array', min: 3, max: 5 }}>
          <Select multiple v-model={state.formData.enterpriseName} placeholder="array,min:3,max:5">
            <SelectOption children="支付宝" value="alipay"/>
            <SelectOption children="微信支付" value="wechat_pay"/>
            <SelectOption children="财付通" value="qq_pay"/>
            <SelectOption children="快支付" value="fast_pay"/>
            <SelectOption children="云闪付" value="cloud_pay"/>
            <SelectOption children="网银支付" value="net_pay"/>
            <SelectOption children="快捷支付" value="convince_pay"/>
            <SelectOption children="paypal" value="paypal"/>
          </Select>
        </FormItem>
        <div style={{ textAlign: 'right' }}>
          {typeof state.formData.enterpriseName}{"->"}{JSON.stringify(state.formData.enterpriseName)}
        </div>
        {!!state.showAddress && (
          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
            <Input v-model={state.formData.address} placeholder="所在地"/>
          </FormItem>
        )}
        <FormItem label="Form.rules->field" field="legalName">
          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
        </FormItem>
        <FormItem colon={false}>
          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
          <Button label="Commit" onClick={submit} type="primary"/>
        </FormItem>
      </Form>
    </DemoRow>
  );
});


export const demo8 = designPage(() => {

  const { refs, onRef } = useRefs({
    form: Form,
  });

  const state = reactive({
    formData: {
      enterpriseName: '',
    } as any,
    showAddress: true,
    rules: {
      legalName: { required: true },
    },
  });

  const submit = async () => {
    await refs.form?.validate();
    $message('校验通过');
  };

  return () => (
    <DemoRow title="校验arraystring">
      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
        <FormItem label="所在地">
          <Checkbox v-model={state.showAddress} label="所在地"/>
        </FormItem>
        <FormItem label="FormItem.required" required field="enterpriseName" rules={{ type: 'arraystring', min: 3, max: 5 }}>
          <Select multiple valueType="arraystring" v-model={state.formData.enterpriseName} placeholder="array,min:3,max:5">
            <SelectOption children="支付宝" value="alipay"/>
            <SelectOption children="微信支付" value="wechat_pay"/>
            <SelectOption children="财付通" value="qq_pay"/>
            <SelectOption children="快支付" value="fast_pay"/>
            <SelectOption children="云闪付" value="cloud_pay"/>
            <SelectOption children="网银支付" value="net_pay"/>
            <SelectOption children="快捷支付" value="convince_pay"/>
            <SelectOption children="paypal" value="paypal"/>
          </Select>
        </FormItem>
        <div style={{ textAlign: 'right' }}>
          {typeof state.formData.enterpriseName}{"->"}{JSON.stringify(state.formData.enterpriseName)}
        </div>
        {!!state.showAddress && (
          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
            <Input v-model={state.formData.address} placeholder="所在地"/>
          </FormItem>
        )}
        <FormItem label="Form.rules->field" field="legalName">
          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
        </FormItem>
        <FormItem colon={false}>
          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
          <Button label="Commit" onClick={submit} type="primary"/>
        </FormItem>
      </Form>
    </DemoRow>
  );
});


export const demo9 = designPage(() => {

  const { refs, onRef } = useRefs({
    form: Form,
  });

  const state = reactive({
    formData: {
      enterpriseName: '',
    } as any,
    showAddress: true,
    rules: {
      legalName: { required: true },
    },
  });

  const submit = async () => {
    await refs.form?.validate();
    $message('校验通过');
  };

  return () => (
    <DemoRow title="校验arrayjson">
      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
        <FormItem label="所在地">
          <Checkbox v-model={state.showAddress} label="所在地"/>
        </FormItem>
        <FormItem label="FormItem.required" required field="enterpriseName" rules={{ type: 'arrayjson', min: 3, max: 5 }}>
          <Select multiple valueType="arrayjson" v-model={state.formData.enterpriseName} placeholder="array,min:3,max:5">
            <SelectOption children="支付宝" value="alipay"/>
            <SelectOption children="微信支付" value="wechat_pay"/>
            <SelectOption children="财付通" value="qq_pay"/>
            <SelectOption children="快支付" value="fast_pay"/>
            <SelectOption children="云闪付" value="cloud_pay"/>
            <SelectOption children="网银支付" value="net_pay"/>
            <SelectOption children="快捷支付" value="convince_pay"/>
            <SelectOption children="paypal" value="paypal"/>
          </Select>
        </FormItem>
        <div style={{ textAlign: 'right' }}>
          {typeof state.formData.enterpriseName}{"->"}{JSON.stringify(state.formData.enterpriseName)}
        </div>
        {!!state.showAddress && (
          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
            <Input v-model={state.formData.address} placeholder="所在地"/>
          </FormItem>
        )}
        <FormItem label="Form.rules->field" field="legalName">
          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
        </FormItem>
        <FormItem colon={false}>
          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
          <Button label="Commit" onClick={submit} type="primary"/>
        </FormItem>
      </Form>
    </DemoRow>
  );
});

export const demo10 = designPage(() => {

  const { refs, onRef } = useRefs({
    form: Form,
  });

  const state = reactive({
    formData: {} as any,
    rules: {
      legalName: { required: true },
      registryCapital: { required: true },
    },
  });

  const dynamicRequired = (formData: PlainObject | null | undefined) => {
    return !!formData!.enterpriseName;
  };

  const submit = async () => {
    await refs.form?.validate();
    $message('校验通过');
  };

  return () => (
    <DemoRow title="统一设置校验规则">
      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
        <FormItem label="FormItem.required" required field="enterpriseName">
          <Input v-model={state.formData.enterpriseName} placeholder="企业名称"/>
        </FormItem>
        <FormItem label="Form.rules->field" field="legalName">
          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
        </FormItem>
        <FormItem label="Form.rules->label" field="registryCapital">
          <Input v-model={state.formData.registryCapital} placeholder="注册资本"/>
        </FormItem>
        <FormItem label="FormItem.required有值时必填required有值时必填" required={dynamicRequired} field="businessNature">
          <Input v-model={state.formData.businessNature} placeholder="经营范围"/>
        </FormItem>

        <FormItem colon={false}>
          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
          <Button label="Commit" onClick={submit} type="primary"/>
        </FormItem>
      </Form>
    </DemoRow>
  );
});
